<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/main/css/main.css}">
    <title>美食分享平台</title>
</head>
<body>
<!-- 顶部导航栏 -->
<div th:replace="common/m_topbar::m_topbar"></div>
<!-- 主要内容 -->
<div class="container">
    <div class="col-sm-12">
        <ul class="nav nav-pills nav-stacked" style="margin-top: 80px">
            <li class="media" th:each="nw:${news}">
                <div class="media-left">
                    <a th:href="'/foodshare/main/newsDetail/'+${nw.newsId}">
                        <img height="180" width="200" th:src="${nw.newsImage}"></a>
                </div>
                <div class="media-body">
                    <div style="width: 600px;height: 20px;">
                        <a th:href="'/foodshare/main/newsDetail/'+${nw.newsId}">
                            <h4 class="media-heading" th:text="${nw.newsTitle}"></h4></a>
                    </div>
                    <div style="width: 600px;height: 120px">
                        <p th:text="${nw.newsDetail}"></p>
                    </div>
                </div>
                <br/>
            </li>
        </ul>
    </div>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <!-- 首页 -->
            <li class="page-item">
                <a class="page-link" th:href="'/foodshare/main/news?page=0'">首页</a>
            </li>
            <!-- 上一页 -->
            <li class="page-item" th:if="${news.hasPrevious()}">
                <a class="page-link" th:href="'/foodshare/main/news?page=' + ${news.previousPageable().getPageNumber()}" th:text="上一页"></a>
            </li>
            <!-- 中间页 -->
            <li class="page-item" th:each="page:${#numbers.sequence(0, news.getTotalPages() - 1)}">
                <a class="page-link" th:href="'/foodshare/main/news?page=' + ${page}" th:text="${page + 1}" th:if="${page ne news.pageable.getPageNumber()}"></a>
                <a class="page-link" th:href="'/foodshare/main/news?page=' + ${page}" th:text="${page + 1}" th:if="${page eq news.pageable.getPageNumber()}" th:style="'font-weight:bold;background: #6faed9;'"></a>
            </li>
            <!-- 下一页 -->
            <li class="page-item" th:if="${news.hasNext()}">
                <a class="page-link" th:href="'/foodshare/main/news?page=' + ${news.nextPageable().getPageNumber()}" th:text="下一页"></a>
            </li>
            <!-- 尾页 -->
            <li class="page-item">
                <a class="page-link" th:href="'/foodshare/main/news?page=' + ${news.getTotalPages() - 1}">尾页</a>
            </li>
        </ul>
    </nav>
</div>
<!-- 底部 -->
<div th:replace="common/m_bottom::m_bottom"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>